<template>
	<view class="container flex-center flex-column">
		<view class="addressBack-box">
			<view class="consignee-box bor-line-F7F7F7">
				<input type="number" v-model="num" @input="applycheck" class="fs28" placeholder-class="consignee"
					placeholder="兑换数量" />
			</view>
			<view class="bankTag-box bor-line-F7F7F7 flex-row-plus flex-sp-between flex-items">
				<view class="fs28 addressTag">{{coinName}}:{{balance}}</view>
				<view>
					<label>需要使用{{credit}}个{{coinName}}</label>
				</view>
			</view>
			<view class="apply-box">
				<view class="apply-withdraw" @click="applyWithdraw">确认兑换</view>
			</view>
		</view>
		<view class="withdraw-history">
			<view class="history-list">
				<view class="history-head">
					<label class="history-label fs30 font-color-333">历史记录</label>
				</view>
				<view class="history-content" v-for="(item, index) in historyList" :key="index">
					<view class="withdraw-detail flex-items flex-sp-between">
						<view class="detail-top">
							<view class="detail-bottom">
								<label class="status fs28 font-color-333">{{item.createTime}}</label>
							</view>
							<view>
								<label class="cardnum fs24 font-color-999">{{item.bak}}</label>
							</view>
						</view>
						<view>
							<label class="apply-balance">{{item.amount}}个{{coinName}}</label>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick,
		computed
	} from "vue";
	import {
		request
	} from "@/utils/request";
	import API from "@/config/api";
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";

	const memberData = ref({})
	const num = ref('')
	const credit = ref(0);
	const balance = ref(0)
	const historyList = ref([]);
	const exchangeRate = ref(0);
	const coinName = ref('')
	const historyQueryParam = ref({
		pageNum: 1,
		pageSize: 100,
		condition: {
			subject: 1,
			tradeType:0,
			curType:4
		}
	})

	onMounted(() => {
		GetUser()
		getCompisteCouponExchangeConfig()
		GetHistoryList()
		nextTick(()=>{
			coinName.value = getApp().globalData.coinName
		})
	})
	const GetUser = async () => {
		try {
			const res = await request(API.GetUser, {}, 'GET')
			memberData.value = res.data
			uni.setStorageSync('storage_userInfo', memberData.value)
			balance.value = memberData.value.coin
		} catch (err) {}
	}

	const GetHistoryList = async () => {
		try {
			const res = await request(API.queryAccountFlowList, historyQueryParam.value, 'POST')
			console.log(JSON.stringify(res))
			historyList.value = res.data.list
		} catch (err) {
			console.log(err.message)
		}
	}

	const getCompisteCouponExchangeConfig = async () => {
		try {
			const res = await request(API.compositeCouponConfig, {}, 'POST')
			if (res.code = '200')
				exchangeRate.value = res.data
			else uni.showToast({
				title: res.errorData,
				duration: 200
			})
		} catch (err) {
			console.log(err.message)
		}
	}

	const applycheck = async (e) => {
		credit.value = parseInt(num.value ? num.value : '0') * exchangeRate.value
	}

	const applyWithdraw = async () => {
		if (num.value < '1') {
			uni.showToast({
				title: "兑换数量不能为空",
				duration: 2000,
				icon: 'none'
			})
			return
		} else if (credit.value > balance.value) {
			uni.showToast({
				title: coinName.value+"不足，请重新输入申请数量",
				duration: 2000,
				icon: 'none'
			})
			return
		} else {
			const res = await request(API.compositeCouponExchange, {
				amount: num.value
			}, 'POST')
			if (res.code == 40001) {
				uni.navigateTo({
					url: 'login'
				})
			} else if (res.code == 200) {
				uni.showToast({
					title: '兑换成功',
					duration: 2000,
					icon: 'none'
				})
				num.value = ''
				credit.value =0
				
				GetUser()
				GetHistoryList()
			} else if (res.data) {
				uni.showToast({
					title: res.data.msg,
					duration: 2000,
					icon: 'none'
				})
			}
		}
	}

	const parsedMoney = computed(() => parseFloat(money.value / 100).toFixed(2));
	const parsedStatus = computed(() => {
		if (status.value === 0) {
			return '审核中';
		} else if (status.value === 1) {
			return '已通过';
		} else {
			return '已拒绝';
		}
	})
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.container {
		padding: 20rpx;

		.addressBack-box {
			background-color: #FFFFFF;
			padding: 30upx 30upx;

			.consignee-box {
				padding-bottom: 36upx;
				width: 690upx;
				margin-top: 20upx;

				.consignee {
					color: #999999;
					font-size: 28upx;
				}
			}

			.apply-withdraw {
				width: 100%;
				height: 100upx;
				line-height: 100upx;
				color: #FFF;
				border-radius: 48rpx;
				text-align: center;
				background: #F3641E;
				margin: 0 auto;
				margin-top: 20rpx;
			}

			.bankTag-box {
				margin-top: 19px;
				padding-bottom: 19px;

				.addressTag {
					color: #999999
				}

				.arrow {
					width: 16upx;
					height: 24upx;
				}
			}
		}

		.withdraw-history {
			margin-top: 14rpx;

			.history-list {
				background: white;
				padding: 30rpx;

				.history-label {
					height: 92rpx;
					line-height: 92rpx;
				}

				.history-content {
					border-top: 2rpx solid #F3F4F5;

					.withdraw-detail {
						height: 150rpx;

						.apply-balance {
							width: 160rpx;
							height: 58rpx;
							line-height: 58rpx;
							font-size: 24rpx;
							background: #EEEEEE;
							display: block;
							text-align: center;
							color: #999999;
						}
					}
				}
			}
		}
	}

	.content {
		font-size: 35rpx;
		width: 500rpx;

		.btn {
			margin-bottom: 20rpx;
			width: 200rpx;
			background-image: linear-gradient(135deg, #FFA100 10%, #FF7911 100%);
		}
	}
</style>